<template>
    <div class="pad-20 min-heigh bg-fff pr">
        <div class="card-box pad-20 zxzbg3 fff" style="height:2.8rem">
                <div>
                    <div class="fiex flex-top">
                        <div v-if="cardDetial.bankCode" class="back-icon mag-r-10">
                           <img  :src="cardDetial.bankCode| fmtBankimsrc" alt="">
                        </div>
                        <div>
                            <div class="f-30">{{cardDetial.bank}}</div>
                            <div class="f-24">信用卡</div>
                        </div>
                    </div>
                    <div class="mag-t-30">
                        <div class="fiex center f-50">
                            <div class="fiex1">****</div>
                            <div class="fiex1">****</div>
                            <div class="fiex1">****</div>
                            <div class="fiex1 f-40">{{cardDetial.bankCard|fmtCardNo}}</div>
                        </div>
                    </div>
                </div>
        </div>
        <div class="mag-t-80 c000 f-25">
            <div class="oh f-b pad-b-10"  @click="opzd()">
                <div class="fl">账单日</div>
                <div class="fr">
                    <span v-if="zdJson.data==''" class="mag-r-10 v-midle f-30 c999 ">请选择</span>
                    <span  v-else class="mag-r-10 v-midle f-30 ">{{zdJson.data}}</span>
                    <van-icon class="v-midle" size="0.3rem" style="vertical-align: text-top;" name="arrow" />
                </div>
            </div>
             <div class="line-hui"></div>
              <div class="oh f-b pad-b-15 pad-t-25"  @click="ophk()">
                <div class="fl">还款日</div>
               <div class="fr">
                    <span v-if="zdJson.data==''" class="mag-r-10 v-midle f-30 c999 ">请选择</span>
                    <span  v-else class="mag-r-10 v-midle f-30 ">{{hkJson.data}}</span>
                    <van-icon class="v-midle" size="0.3rem" style="vertical-align: text-top;" name="arrow" />
                </div>
            </div>
               <div class="line-hui"></div>
              <div class="oh f-b pad-b-25 pad-t-25">
                <div class="fl">预留手机号</div>
               <input type="text" v-model="cardDetial.reservePhone" class="mag-l-50 f-b" placeholder="请输入手机号">
            </div>
             <div class="line-hui"></div>
             <div style="height: 50vh;"></div>
             <div @click="subData()" class="sub-btn">
                保存
             </div>
        </div>
        <van-popup
        v-model="zdJson.type"
        position="bottom"
        >
          <van-area v-if="zdJson.type" @confirm="confirmzd" @cancel="cancelzd"   :area-list="columns" :columns-num="1" />;
        </van-popup>
        <van-popup
        v-model="hkJson.type"
        position="bottom"
        >
          <van-area v-if="hkJson.type" @confirm="confirmhk" @cancel="cancelhk"   :area-list="columns" :columns-num="1" />;
        </van-popup>
    </div>
</template>

<script>
var $th ="";
export default {
data() {
return {
    zdJson:{
        type:false,
        data:""
    },
    hkJson:{
        type:false,
        data:""
    },
    cardDetial:{}, //会员卡详情
     columns:{
         province_list:{
               110000: '北京市',
               120000: '天津市'
         }
     }

}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
async mounted() {
    $th = this;
    var cardId = $th.getUrl("id");
    var cardId = localStorage.getItem("id");
    console.log("cardId",cardId);
    try {
        var cardDetial = await $th.$axiosFun('/customer/bankCard/findCardById',{
            id:cardId
        },'get');
        if(cardDetial.code==1000){
              $th.cardDetial = cardDetial.data;
              $th.zdJson.data =$th.cardDetial.statementDate;  // 账单日 ,
              $th.hkJson.data = $th.cardDetial.repaymentDate;  //还款日
        }else{
            $th.$toast(cardDetial.message);
        }
    } catch (error) {
        
    }
  
    console.log("cardDetial",cardDetial)
    this.columns.province_list ={};
    for(var i=1;i<=31;i++){
        this.columns.province_list[i] =i;
    }

},
methods:{
   async subData(){ //提交数据
        if($th.zdJson.data==''){ //请输入账单日
            $th.$toast('请选择账单日'); 
            return
        }
        if($th.hkJson.data==''){ //请输入还款日
            $th.$toast('请选择还款日');
             return
        }
        if($th.hkJson.data==$th.zdJson.data){
             $th.$toast('账单日与还款日不可以为同一天');
             return
        }
        if($th.cardDetial.reservePhone==''){ //请输入手机号
            $th.$toast('请输入预留手机号');
             return
        }
        var sendData = {};
        sendData.token = localStorage.getItem('token');
        sendData.id = $th.cardDetial.id; //
        sendData.statementDate =  $th.zdJson.data;//账单日
        sendData.repaymentDate =  $th.hkJson.data; //还款日
        sendData.reservePhone =  $th.cardDetial.reservePhone; //预留手机号
        sendData.type = "2";//1:储蓄卡 2信用卡
        console.log("获取数据",sendData)
         try {
                var cardDetial = await $th.$axiosFun('/customer/bankCard/update',sendData,'post');
                if(cardDetial.code==1000){
                     $th.$toast("更新成功");
                }else{
                    $th.$toast(cardDetial.message);
                }

        } catch (error) {
            
        }


        // $th.cardDetial
    },
     confirmhk(val){
        console.log(val)
        this.hkJson.data = this.$PrefixInteger(val[0].code,2);
        this.hkJson.type = false;
    },
    cancelhk(){
        this.hkJson.type = false;
    },
    ophk(){
       this.hkJson.type= true; 
       console.log(this.columns )
    },
    confirmzd(val){
        console.log(val)
        this.zdJson.data =this.$PrefixInteger(val[0].code,2);
        this.zdJson.type = false;
    },
    cancelzd(){
        this.zdJson.type = false;
    },
    opzd(){
       this.zdJson.type= true; 
       console.log(this.columns )
    },
      onChange(picker, value, index) {
    //   sToast(`当前值：${value}, 当前索引：${index}`);
    }
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.card-box{border-radius: 0.05rem;}
.back-icon{width: 0.4rem; height: 0.4rem; border-radius: 100%; overflow: hidden; }
.back-icon img{ width: 100%; height: 100%;}
.zxzbg3 {
  background: url("http://hstatic.1818pay.cn/image/icon/cl4.png");
  background-size: 100% 100%;
}
</style>